<template>
  <div class="comment-result-dialog">
    <uni-popup ref="popup" :is-mask-click="false" background-color="transparent" @change="change">
      <div class="main-content">
        <div class="title-content">
          <h2 v-text="resultTitle" />
          <uni-icons class="close" type="closeempty" size="20" color="#333333" @click="close" />
        </div>
        <div class="result-content">
          <p v-text="resultDetail" />
        </div>
        <div class="btn-content">
          <button type="primary" @click="close">{{ btnText }}</button>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
  export default {
    name: 'CommentResultDialog',
    components: {},
    props: {
      resultTitle: {
        type: String,
        default: '',
      },
      resultDetail: {
        type: String,
        default: '',
      },
      btnText: {
        type: String,
        default: '确定',
      },
    },
    data() {
      return {};
    },
    computed: {},
    watch: {},
    mounted() {
      this.$nextTick(() => {
        this.popupShow(true);
      });
    },
    created() {
    },
    methods: {
      close() {
        this.popupShow(false);
      },
      popupShow(isShow) {
        const popup = this.$refs.popup[ 0 ] || this.$refs.popup;
        if (isShow) {
          popup.open('center');
          return;
        }
        popup.close();
      },
      change(e) {
        if (!e.show) {
          setTimeout(() => {
            this.$emit('close');
          }, 500);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .comment-result-dialog {
    .main-content {
      width: 90vw;
      background-color: white;
      border-radius: 10px;
      padding: 20px;
      .title-content {
        position: relative;
        margin: 0 -20px;
        h2 {
          font-weight: 600;
          font-size: 18px;
          line-height: 1;
          text-align: center;
          color: #0669f0;
          padding: 0 30px;
        }
        .close {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .result-content {
        padding: 20px;
        p {
          font-size: 14px;
          line-height: 2;
          color: black;
          font-weight: 600;
          text-align: center;
        }
      }
      .btn-content {
        padding: 0 20px;
        button {
          border-radius: 10px;
          background-color: #0669f0;
          transition: all 0.2s;
          &.disable {
            opacity: 0.5;
          }
        }
      }
    }
  }
</style>
